<div style="text-align: center">
</div>
<script src="assets/jquery.min.js"></script>
<table class="head">
  <tr class="tr1">
    <th colspan="3"></th>
    <td></td>
    <td style="width: 370px"></td>
    <td style="width: 200px;text-align:center;"><img src="assets/image/title.jpg" width="142px" height="41px"/>
      <img src="assets/image/logo.jpg" width="40px" height="40px">
    </td>
    <td style="width: 550px;text-align:right;">
    </td>
    <td style="width: 100px;text-align:center;"><nav>
      <button  class="logout"  (click)="nologin()" routerLink="/login" ><a>注销</a></button>
    </nav></td>
  </tr>
  <tr class="tr2">
    <th class="list" style="width: 150px;">考勤登记表</th>
    <th></th>
    <th class="list" style="width: 100px"></th>
    <td colspan="3"></td>
    <td style="width: 100px;text-align:right;"></td>
    <td style="width: 100px"><button (click)="showList()" class="list">菜单</button></td>
  </tr>
</table>
<div style="float: right">
  <ul id="sub_menu" style="display: none;">
    <table class="sub_menu" height="200px"  style=" text-align:center; width: 200px">
      <tr>
        <td><a routerLink="/newLeave">填写出差申请</a></td>
      </tr>
      <tr>
        <td><a routerLink="/newVacation">填写请假申请</a></td>
      </tr>
      <tr>
        <td><a routerLink="/leaveConfirm">审批出差申请</a></td>
      </tr>
      <tr>
        <td><a routerLink="/vacationConfirm">审批请假申请</a></td>
      </tr>
      <tr>
        <td><a routerLink="/records">查看申请记录</a></td>
      </tr>
    </table>
  </ul>
</div>
<router-outlet></router-outlet>
<br />
<br />
<div style="float: left;position: relative;left: 35%">
  <table>
    <tr>
      <td style="width: 300px"><app-datepipe></app-datepipe> </td>
      <td><button (click)="onClick()" class="button" style="width:70px;height:30px">签到</button></td>
    </tr>
  </table>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- 考勤表格 -->
<p id="demo"></p>
<div>
  <div class="div1">
    <p>
      <img src="assets/image/1.png" width="15px" height="15px">出勤
    </p>
    <p>
      <img src="assets/image/2.png" width="15px" height="15px">缺勤
    </p>
    <p>
      <img src="assets/image/3.png" width="15px" height="15px">迟到
    </p>
    <p>
      <img src="assets/image/4.png" width="15px" height="15px">请假
    </p>
  </div>
  <div class="div2">
    <ul class="datas">
      <table id="tab" class="bordered" text-align="center">
        <tr>
          <th><div align="left" style="color: #444444; font-size: 10px" >12月</div>一</th>
          <th>二</th>
          <th>三</th>
          <th>四</th>
          <th>五</th>
          <th>六</th>
          <th>日</th>
        </tr>
        <!--
      <tr *ngFor="let data of datas">
        <td text-align="center" width="70"><img src="assets/image/{{data.mon}}.png" width="15px" height="15px"></td>
        <td text-align="center" width="70"><img src="assets/image/{{data.tue}}.png" width="15px" height="15px"></td>
        <td text-align="center" width="70"><img src="assets/image/{{data.web}}.png" width="15px" height="15px"></td>
        <td text-align="center" width="70"><img src="assets/image/{{data.thu}}.png" width="15px" height="15px"></td>
        <td text-align="center" width="70"><img src="assets/image/{{data.fri}}.png" width="15px" height="15px"></td>
        <td text-align="center" width="70"><img src="assets/image/{{data.sat}}.png" width="15px" height="15px"></td>
        <td text-align="center" width="70"><img src="assets/image/{{data.sun}}.png" width="15px" height="15px"></td>
      </tr>
      -->
      </table>
      <span class="badge"></span>
    </ul>
  </div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
